<template>
	<view style="">
		<view class=""
			style="height: 190rpx;width: 100%;background-color: #fff;text-align: center;padding-top: 110rpx;font-size: 32rpx;position: fixed;top: 0;left: 0;">
			<view class="" style="position: absolute;padding-bottom: 10rpx;display: flex;align-items: center;"
				@click="back">
				<u-icon v-if="appmoney == ''" name="arrow-left" color="#000" size="26"></u-icon>
				<button v-else style="display: flex;background: rgba(255, 0, 0, 0);" open-type="launchApp"
					app-parameter="wechat" binderror="launchAppError">
					<u-icon name="arrow-left" color="#000" size="26"></u-icon>
					返回APP</button>
			</view>
			<view class="" style="padding-top: 10rpx;">
				充值
			</view>
		</view>
		<view class="padding">
			<view class="moneyone">
				当前poke币:
				<view class="item">
					￥{{moneys}}
				</view>
			</view>

			<view class="moneytwo">
				<view class="title">
					充值金额:
				</view>
				<view class="" style="width: 100%;">
					<view class="items" v-for="(item,index) in moneyitem" :key="index"
						:class="index==selenum&&index!==5?'items_on':'items_off'" @click="selemoney(index)">
						<view class="" v-if="item.money > 0">
							￥<text style="font-size: 40rpx;">{{item.money}}</text>
						</view>
						<view class="liwa" v-else>
							<!--  type="number" -->
							￥<input v-model="moneyzdy" placeholder="1-5000元自定义" @input="numevent" maxlength="4"
								placeholder-style="color:#B4B4B6;font-size:24rpx;">

						</view>
					</view>
				</view>
			</view>

			<view class="moneytitle">
				<view class="title" v-if="content != ''">
					充值提示:
				</view>
				<view class="text">
					<view class="" v-html="content">

					</view>
				</view>
			</view>

			<!-- <view class="cu-form-group margin-top">
				<view class="title">￥</view>
				<input placeholder="请填写充值金额" type="number" v-model="money"></input>
			</view>
			<view class="padding flex flex-direction bg-white">
				<button class="cu-btn bg-blue lg" @click="postmes()">充值</button>
			</view> -->
			<!-- <view class="padding align-center">
				<view class="text-center">
					<view class=" text-sm">*充值将会在两小时内发放到您的欧币</view>
				</view>
			</view> -->
		</view>
		<view class="swbtn">
			<view class="padding flex flex-direction bg-white">
				<image @click="postmes()" :src="Imgbase + '/1zhan_hcobtn.png'" style="width: 100%;height: 85rpx;"
					mode="aspectFit"></image>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import md5 from '@/utils/md5.js'
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				money: '',
				moneys: 0,
				moneyitem: [{
					money: 50
				}, {
					money: 100
				}, {
					money: 200
				}, {
					money: 500
				}, {
					money: 1000
				}, {
					money: 0
				}],
				selenum: -1,
				content: '',
				moneyzdy: '',
				id: 0,
				token: '',
				a: '',
				b: '',
				uniid: 0,
				appmoney:0
			};
		},
		onLoad(e) {
			let _this = this
			if (e.appmoney) {
				_this.appmoney = e.appmoney
				_this.wxpostmes(e.appmoney)
			}
			if (e.uniid) {
				_this.uniid = e.uniid
				console.log(_this.uniid)
			}
		},
		onShow() {
			this.getmoney()
			this.explaint()
			this.toolslib()
			
			console.log(1231231)
		},
		methods: {
			launchAppError(e) {
				console.log(e.detail)
				uni.showToast({
					icon: 'none',
					title: e.detail.errMsg
				})
			},
			toolslib(money) {
				let _this = this;
				let str = _this.$uniApi.mdnum();
				var md5Str = md5.hex_md5(str[1])
				uni.request({
					url: _this.$globals.apibase + '/api/test/toolslib',
					data: {
						nonce: str[2],
						sign: md5Str,
						timestamp: str[0]
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						
					}
				});
			},
			wxpostmes(money) {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/Luckorder/invest',
					data: {
						token: uni.getStorageSync('token'),
						money: money,
						ver: _this.$mpVer,
						platform: 'app'
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						this.a = res.data.code
						this.b = res.data.msg
						if (res.data.code == '1') {
							uni.requestPayment({
								timeStamp: res.data.data.result.timeStamp,
								nonceStr: res.data.data.result.nonceStr,
								package: res.data.data.result.package,
								signType: res.data.data.result.signType,
								paySign: res.data.data.result.paySign,
								success: function(result) {
									uni.showToast({
										icon: 'success',
										title: '充值成功',
										duration: 5000,
									});
								}
							})
						}
						if (res.data.code == '0') {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					}
				});
			},
			back() {
				uni.navigateBack()
			},
			// 监听input
			numevent(e) {
				let val = e.detail.value;
				console.log(val)
			},
			// 选择充值金额
			selemoney(i) {
				this.selenum = i
				this.money = this.moneyitem[i].money
				this.moneyzdy = ''
			},
			// 获取当前余额
			getmoney() {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/Userways/userFront',
					data: {
						token: uni.getStorageSync('token'),
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == '401') {
							uni.setStorageSync('token', '');
							_this.$uniApi.trylogin();
						}
						if (res.data.code == '1') {
							if (res.data.data.is_open == '0') {
								_this.levelshow = 0
							} else {
								_this.levelshow = 1
							}
							_this.moneys = res.data.data.user_desc.money;
							_this.uniid = res.data.data.user_desc.id;
						}
					}
				});
			},
			// 充值说明
			explaint() {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/Index/explain',
					data: {
						token: uni.getStorageSync('token'),
						id: 13
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == '401') {
							uni.setStorageSync('token', '');
							_this.$uniApi.trylogin();
						}
						if (res.data.code == '1') {
							_this.content = res.data.data.desc.content
						}
					}
				});
			},
			postmes() {
				let _this = this;
				if (this.money == '' && this.moneyzdy == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入充值金额!'
					});
					return;
				}
				if (this.money == '') {
					if (this.moneyzdy < 1) {
						uni.showToast({
							icon: 'none',
							title: '可充值最小金额为1元'
						});
						return
					}
					if (this.moneyzdy > 5000) {
						uni.showToast({
							icon: 'none',
							title: '可充值最大金额为5000元'
						});
						return
					}
				}
				let mon = this.money == '' ? this.moneyzdy : this.money

				let str = _this.$uniApi.mdnum();
				var md5Str = md5.hex_md5(str[1])
				uni.request({
					url: _this.$globals.apibase + '/api/Luckorder/invest',
					data: {
						token: uni.getStorageSync('token'),
						money: mon,
						ver: _this.$mpVer,
						platform: _this.id == 0 ? '' : 'app',
						nonce: str[2],
						sign: md5Str,
						timestamp: str[0]
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {

						if (res.data.code == '401') {
							uni.setStorageSync('token', '');
							_this.$uniApi.trylogin();
						}
						if (res.data.code == '1') {
							if (res.data.data.state == 1) {
								uni.showToast({
									icon: 'none',
									title: '充值成功',
									duration: 5000
								});
								setTimeout(() => {
									uni.reLaunch({
										url: `/pages/index/index?mes=myluck`
									});
								}, 1500)
							} else if (res.data.data.state == 0) {
								uni.requestPayment({
									timeStamp: res.data.data.result.timeStamp,
									nonceStr: res.data.data.result.nonceStr,
									package: res.data.data.result.package,
									signType: res.data.data.result.signType,
									paySign: res.data.data.result.paySign,
									success: function(result) {
										uni.showToast({
											icon: 'success',
											title: '充值成功',
											duration: 5000,
										});
										setTimeout(() => {
											uni.reLaunch({
												url: `/pages/index/index?mes=myluck`
											});
										}, 1500)
									}
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: '未知错误'
								});
							}
						}
						if (res.data.code == '0') {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.swbtn {
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		padding-bottom: 20rpx;
		background-color: #fff;

		.cu-btn {
			width: 80%;
			margin: 0 auto;
			border-radius: 50rpx;
			color: #fff;
		}
	}

	.moneytitle {
		padding: 40rpx 0 130rpx;

		.title {
			font-size: 30rpx;
			font-weight: bold;
			padding-bottom: 20rpx;
		}
	}

	.moneytwo {
		padding: 60rpx 0 20rpx;
		font-weight: bold;
		overflow: hidden;

		.items {
			width: 48%;
			height: 120rpx;
			text-align: center;
			line-height: 120rpx;
			border-radius: 15rpx;
			margin-top: 30rpx;
			transition: .4s;
			float: left;
			margin-right: 4%;
		}

		.items_on {
			background-color: #FD963C;
			color: #fff;
		}

		.items_off {
			background-color: #fff;
			color: #000;
		}

		.items:nth-child(2n) {
			margin-right: 0;
		}

		.liwa {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;

			input {
				width: 180rpx;
				font-size: 22rpx;
				text-align: left;
				border-bottom: 1px solid #B4B4B6;
				height: 50rpx;
				font-size: 40rpx;
			}
		}
	}

	.moneyone {
		display: flex;
		align-items: center;
		width: 100%;
		border-bottom: 2rpx solid #989898;
		font-weight: bold;
		padding: 180rpx 0 20rpx;

		.item {
			font-size: 65rpx;
			padding-left: 30rpx;
		}
	}
</style>